<template>
    <template v-if="!registerState">
        <el-form
            class="sign-form"
            ref="signUpRef"
            :model="registerForm"
            :rules="registerFormRule"
        >
            <el-form-item prop="name" class="sign-form-item">
                <el-input
                    class="sign-form-input"
                    placeholder="用户名"
                    v-model="registerForm.user_name"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password" class="sign-form-item">
                <el-input
                    class="sign-form-input"
                    placeholder="密码"
                    v-model="registerForm.pwd"
                ></el-input>
            </el-form-item>
            <el-form-item prop="checkPass" class="sign-form-item">
                <el-input
                    class="sign-form-input"
                    placeholder="确认密码"
                    v-model="registerForm.check_pwd"
                ></el-input>
            </el-form-item>
            <el-form-item class="sign-submit">
                <el-button
                    type="primary"
                    :loading="submitLoading"
                    @click="registerSubmit"
                    >注 册</el-button
                >
            </el-form-item>
        </el-form>
    </template>
    <template v-else>
        <div class="register-success">
            <i class="icon icon-check"></i>
            <div class="register-success-tip">
                <span>注册成功，</span>
                <span style="color: #f00">{{ jumpIncountdownNum }}S</span>
                <span>后自动跳转</span>
                <RouterLink to="/">首页</RouterLink>
            </div>
            <el-button type="primary">
                <RouterLink to="/sign-in" style="color: #fff"
                    >去登录</RouterLink
                >
            </el-button>
        </div>
    </template>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import type { RegisterForm } from '@/types'
import { register } from '@/api/users'
import { TimerDelay } from '@/utils/timer-delay'

const router = useRouter()
const registerState = ref<boolean>(false)
const registerForm = ref<RegisterForm>({
    user_name: '',
    pwd: '',
    check_pwd: '',
})

// 注册成功后的倒计时
const jumpIncountdownNum = ref<number>(10)

// 验证
const signUpRef = ref<FormInstance>()
const checkPass = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请输入密码'))
    } else {
        if (registerForm.value.pwd !== '') {
            signUpRef.value?.validateField('checkPass', () => null)
        }
        callback()
    }
}

const checkPassed = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerForm.value.check_pwd) {
        callback(new Error('两次输入的密码不一致'))
    } else {
        callback()
    }
}

const registerFormRule = ref<FormRules<RegisterForm>>({
    user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    pwd: [{ validator: checkPass, trigger: 'blur' }],
    check_pwd: [{ validator: checkPassed, trigger: 'blur' }],
})

// 注册
const submitLoading = ref<boolean>(false)
const registerSubmit = () => {
    signUpRef.value?.validate((valid) => {
        if (valid) {
            submitLoading.value = true
            register(registerForm.value)
                .then(() => {
                    submitLoading.value = false
                    registerState.value = true
                    toSignIn()
                })
                .catch((err) => {
                    submitLoading.value = false
                    ElMessage.error(err.message)
                })
        }
    })
}

// 注册成功后倒计时跳转到首页
const toSignIn = (): void => {
    const timer = new TimerDelay(1000, () => {
        jumpIncountdownNum.value--
        if (jumpIncountdownNum.value < 1) {
            timer.stop()
            router.push('/')
        }
    })

    timer.start()
}

onMounted(() => {
    // toSignIn()
    // const timer = new TimerDelay(1000, () => toSignIn(timer))
    // timer.start()
})
</script>

<style lang="less" scoped>
@import url('./sign-form.less');
.register-success {
    .icon {
        font-size: 72px;
        color: var(--color-primary-hover);
    }
    &-tip {
        margin: 32px 0;
    }
}
</style>
